﻿<aside id="actions">
    <h3>Actions</h3>
    <div class="action" data-bind="click: gotoMain">
        <p>Main</p>
    </div>
    <div class="action" data-bind="click: gotoMonster">
        <p>Attack monster</p>
    </div>
    <div class="action" data-bind="click: gotoPlayer">
        <p>Attack player</p>
    </div>
    <div class="action" data-bind="click: gotoHeal">
        <p>Train</p>
    </div>
    <div class="action" data-bind="click: gotoShop">
        <p>Shop</p>
    </div>
</aside>
<div id="display">
    <h3 data-bind="text: name"></h3>
    <img data-bind="attr: { src: imageUrl }" />
    <div class="stats"></div>
    <div class="list-items">
        <p>Inventory: select and click <button data-bind="click: equip">equip</button></p>
        <ul data-bind="source: items" data-template="hero-item-template">
        </ul>
    </div>
</div>

<script type="text/x-kendo-template" id="hero-item-template">
    <li class="list-item" data-bind="click: select, attr: { id: itemId }">
        <img data-bind="attr: { src: imageUrl }" />
    </li>
</script>
